<template>

    <div class="body">
        <aside>
            <div>
                <el-image class="logo1" :src="loginImg?.logo" :fit="'fill'" />
            </div>
            <div>
                <el-image class="logo2" :src="loginImg?.logo2" :fit="'fill'" />
            </div>

        </aside>
        <main>
            <div>
                <h1>欢迎来到秀匠</h1>
                <Input placeholder="手机号码" @textChange="(e,state)=>handlePhone(e,state)" check="phone"></Input>
                <Input placeholder="手机号验证码" code  @getCode="()=>handleCode()" :codeState="phoneState"></Input>
                <Input placeholder="推荐人手机号"></Input>
                <div class="protocolBox">
                    <input type="checkbox" :value="protocol" @change="hangleProtocol" name="协议" id="protocol">
                    <label for="protocol">我已阅读并同意</label>
                    <a href="#">《服务协议》</a>
                </div>
                <div>
                    <el-button class="toLogin" type="primary" @click="">登录</el-button>
                </div>


            </div>
        </main>
    </div>
</template>



<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue';
import { getLogin } from '../../apis/apis'
import Input from '@/components/Input.vue';

const protocol = ref(false)
interface loginImg {
    logo: string;
    logo2: string;
    // [propName: string]: any,

}
const loginImg = ref<loginImg | null>(null)


//表单校验
const phoneState = ref(false)
const handlePhone = (e:string,state:boolean) => {
    phoneState.value = state
}
const hangleProtocol = () => {
    protocol.value = !protocol.value;
    console.log(protocol.value)
}

const handleCode = () =>{
    const num = Math.floor(Math.random() * 10000 )
    console.log(num);
}



onMounted(async () => {
    let res = await getLogin()
    loginImg.value = res as any
    console.log(loginImg.value)
})

</script>


<style lang="scss" scoped>
a {
    text-decoration: none;
    color: #0066CC;
    font-size: 14px;
}

a:hover {
    text-decoration: underline;
}

.body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    & aside {
        flex: 1;
        background-color: #54BAC9;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: end;

        &>div {
            width: 690px;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;

            & .logo1 {
                width: 280px;
            }

            & .logo2 {
                width: 200px;
            }
        }
    }

    & main {
        flex: 1;

        &>div {
            margin-left: 100px;
            margin-top: 230px;

            &>div {
                margin-top: 30px;

            }
        }
    }
    .protocolBox{
        font-size: 14px;
        &>input{
            margin-right: 6px;
        }
    }
    .el-button.toLogin {
        width: 300px;
        color: #68A6DA;
        color: #fff;
        border-radius: 50px;
    }
}
</style>